<template>
    <div>
        <x-header :left-options="{backText: ''}">集体活动应用</x-header>

        <!--<swiper :options="swiperOption" style="height:300px">-->
        <!--&lt;!&ndash; 幻灯内容 &ndash;&gt;-->
        <!--<swiper-slide><img src="http://139.224.135.48/wechatImgs/1.png"/>-->
        <!--<h3>集体活动应用</h3></swiper-slide>-->
        <!--<swiper-slide><img src="http://139.224.135.48/wechatImgs/2.svg"/>-->
        <!--<h3>Build once, run anywhere</h3></swiper-slide>-->
        <!--<swiper-slide><img src="../assets/3.png"/></swiper-slide>-->
        <!--&lt;!&ndash;<swiper-slide><img src="http://139.224.135.48/wechatImgs/3.png"/></swiper-slide>-->
        <!--&lt;!&ndash; 以下控件元素均为可选（使用具名slot来确定并应用一些操作控件元素） &ndash;&gt;-->
        <!--<div class="swiper-pagination" slot="pagination"></div>-->
        <!--</swiper>-->
        <swiper loop auto :list="demo06_list" :index="demo06_index" @on-index-change="demo06_onIndexChange"
                style="width:100%;margin:0 auto;" :aspect-ratio="500/800" dots-position="center"></swiper>
        <grid>
            <grid-item link="sponsor" :label="('发起活动')">
                <img slot="icon" src="../assets/flame.png">
            </grid-item>
            <grid-item link="activities" :label="('我的活动')">
                <img slot="icon" src="../assets/myactivity.png">
            </grid-item>
            <grid-item link="seek" :label="('随便逛逛')">
                <img slot="icon" src="../assets/seek.png">
            </grid-item>
            <grid-item link="hobbies" :label="('兴趣爱好')">
                <img slot="icon" src="../assets/hobby.png">
            </grid-item>
            <grid-item link="person" :label="('个人信息')">
                <img slot="icon" src="../assets/person.png">
            </grid-item>
            <grid-item link="bills" :label="('费用统计')">
                <img slot="icon" src="../assets/bill.png">
            </grid-item>
        </grid>
    </div>
</template>

<script>
    import {XHeader, Actionsheet, Grid, GridItem, Swiper, SwiperItem} from 'vux'
    //    import {swiper, swiperSlide} from 'vue-awesome-swiper'

    const baseList = [{
        url: 'javascript:',
        img: 'https://static.vux.li/demo/1.jpg',
        title: '集体活动应用'
    }, {
        url: 'javascript:',
        img: 'https://static.vux.li/demo/2.jpg',
        title: '结交更多朋友'
    }, {
        url: 'javascript:',
        img: 'https://static.vux.li/demo/3.jpg',
        title: '扩大朋友圈'
    }]
    const urlList = baseList.map((item, index) => ({
        img: item.img,
        title: `${item.title}`
    }))
    export default {
        components: {
//            swiper,
//            swiperSlide,
            XHeader,
            Actionsheet,
            Grid,
            GridItem,
            Swiper,
            SwiperItem
        },
        methods: {
            demo06_onIndexChange (index) {
                this.demo06_index = index
            }
        },
        data () {
            return {
                swiperOption: {
                    // 所有配置均为可选（同Swiper配置）
                    // notNextTick是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象（假如你需要使用获取swiper对象来做什么事，那么这个属性一定要是true）
                    notNextTick: false,
                    autoplay: 3000,
                    grabCursor: true,
                    autoHeight: false,
                    effect: 'flip',
                    setWrapperSize: true,
                    pagination: '.swiper-pagination',
                    paginationClickable: true,
                    mousewheelControl: false,
                    observeParents: false
                },
                demo06_index: 0,
                demo06_list: urlList

            }
        }
    }

</script>

<style>
    img {
        display: block;
        margin: 0 auto;
    }

    h3 {
        text-align: center;
    }

</style>
